<template>
  <div>
    <a-upload
      v-model:file-list="fileList"
      action="https://www.mocky.io/v2/5cc8019d300000980a055e76"
      :show-upload-list="{ showDownloadIcon: true, showRemoveIcon: true }"
      @change="handleChange"
    >
      <a-button>
        <upload-outlined></upload-outlined>
        Upload
      </a-button>
      <!-- 自定义下载图标（点击预览PDF） -->
      <template #downloadIcon="props">
        <a @click.stop="handlePreview(props.file)" style="padding-right:10px;">预览</a>
      </template>
    </a-upload>

    <!-- PDF预览模态框 -->
    <a-modal
      v-model:visible="previewVisible"
      :title="previewTitle"
      :width="1000"
      :mask-closable="false"
    >
      <div class="pdf-preview-container">
        <!-- 用iframe加载PDF -->
        <iframe 
          :src="previewUrl" 
          frameborder="0" 
          class="pdf-frame"
        ></iframe>
      </div>
    </a-modal>
    
  </div>
</template>

<script lang="ts" setup>
import { ref } from 'vue';
import { UploadOutlined, StarOutlined } from '@ant-design/icons-vue';
import type { UploadChangeParam, UploadProps, UploadFile } from 'ant-design-vue';
import { Modal } from 'ant-design-vue';

// 文件列表
const fileList = ref<UploadProps['fileList']>([
  {
    uid: '1',
    name: 'xxx.pdf', // 确保文件名是PDF格式
    status: 'done',
    response: 'Server Error 500',
    url: 'http://gzzszp.cn/123.pdf', // PDF文件的URL
  },
  {
    uid: '2',
    name: 'yyy.pdf',
    status: 'done',
    url: 'http://gzzszp.cn/123.pdf',
  },
  {
    uid: '3',
    name: 'zzz.pdf',
    status: 'error',
    response: 'Server Error 500',
    url: 'http://gzzszp.cn/123.pdf',
  },
]);



// 预览相关状态
const previewVisible = ref(false); // 模态框显示状态
const previewUrl = ref(''); // PDF预览地址
const previewTitle = ref(''); // 预览标题
// 预览PDF

const handlePreview = (file: UploadFile) => {
  // 检查文件是否有有效URL且是PDF
  if (file.url && file.name?.toLowerCase().endsWith('.pdf')) {
    previewUrl.value = file.url; // 设置PDF地址
    previewTitle.value = file.name; // 设置标题为文件名
    previewVisible.value = true; // 显示模态框
  } else {
    Modal.error({
      title: '预览失败',
      content: '文件不是有效的PDF或URL不存在',
    });
  }
};
</script>

<style scoped>
/* PDF预览容器样式 */
.pdf-preview-container {
  width: 100%;
  height: 500px; /* 固定高度，确保PDF显示完整 */
  overflow: hidden;
}

/* iframe样式 */
.pdf-frame {
  width: 100%;
  height: 100%;
}
</style>
